<template>
  <div class="split-landing-page">
    <div
      @mouseenter="setShowName('left')"
      @mouseleave="setShowName('')"
      :class="isShowName === 'left' ? 'show' : ''"
      class="share left-content"
    >
      <div class="share-text">
        <p class="project-details">Playstation 5</p>
        <p class="project-btn">Buy Now</p>
      </div>
    </div>
    <div
      @mouseenter="setShowName('right')"
      @mouseleave="setShowName('')"
      :class="isShowName === 'right' ? 'show' : ''"
      class="share right-content"
    >
      <div class="share-text">
        <p class="project-details">XBox Series X</p>
        <p class="project-btn">Buy Now</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowName: "",
    };
  },
  methods: {
    setShowName(name) {
      this.isShowName = name;
    },
  },
};
</script>

<style lang="scss" scoped>
.split-landing-page {
  width: 100%;
  height: 100%;
  display: flex;
  .share {
    flex: 3;
    height: 100%;
    transition: all 1.4s ease-in-out;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    .share-text {
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
      .project-details {
        font-size: 4rem;
        color: rgb(255, 255, 255);
        white-space: nowrap;
      }
      .project-btn {
        text-decoration: none;
        color: #fff;
        border: #fff solid 0.2rem;
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        width: 15rem;
        padding: 1.5rem;
        margin-left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        &:hover {
          border-color: transparent;
          background: #92C7AE;
        }
      }
    }
  }
  .left-content {
    background-image: url("./image/ps.jpg");
    position: relative;
    &.show {
      flex: 8;
    }
    &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: #7c7bea;
      opacity: 0.6;
    }
  }

  .right-content {
    background-image: url("./image/xbox.jpg");
    &.show {
      flex: 8;
    }
    &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: #2a292a;
      opacity: 0.6;
    }
  }
}
</style>